<template>
  <div class="app-pro-basicLayout-content-wrap">
    <div class="app-pro-pages-content">
      <div class="app-pro-table-search">
        <el-form :inline="true" :model="formInline" ref="formInline" label-width="80px" size="small" class="form-flex-item">
          <el-row :gutter="20">
            <el-col :xs="12" :sm="10" :md="8" :lg="6">
              <el-form-item :label="'빠른검색'|language" prop="keyword">
                <el-input v-model="formInline.keyword" :placeholder="'검색어를 입력해주세요'|language" @keyup.enter.native="handleSearch"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="6" :sm="6" :md="6" :lg="6">
              <el-form-item>
                <el-button type="primary" size="small" @click="handleSearch">{{'검색'| language}}</el-button>
                <el-button size="small" @click="resetForm('formInline')">{{'초기화'| language}}</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="app-pro-pages-table">
        <div class="main-card">
          <div class="main-table-toolbar">
            <div class="main-table-toolbar-title">
              <div class="main-table-toolbar-title-only">이메일</div>
            </div>
            <div class="main-table-toolbar-option">
              <el-link :underline="false" class="main-table-toolbar-item-icon">
                <el-tooltip class="item" effect="dark" :content="'이메일'| language" placement="top">
                  <i @click="downloadFile('/api/email/index', '이메일')" class="el-icon-download"></i>
                </el-tooltip>
              </el-link>
            </div>
          </div>
          <div class="main-table-wrapper" style="padding: 0">
            <my-table
              :columns="columns"
              :data="data"
              :loading="loading"
              :pagination="pagination"
              :showIndex="true"
              :showSelection="true"
              :cellStyle="{padding: '4px 0'}"
              :headerCellStyle="{background:'rgba(247, 133, 2, 1)',color:'#fff'}"
              @emitSelection="emitSelection"
              @currentChange="currentChange"
              @sortChange="sortChange">
              <template v-slot:status="slotProps">
                <el-tag v-if="slotProps.callback.row.status===1" effect="dark" type="info" size="small">전송성공</el-tag>
                <el-tag v-else type="danger" effect="dark" size="small">전송실패</el-tag>
              </template>
              <template v-slot:operation="slotProps">
                <el-button
                  v-if="!slotProps.callback.row.deleted_at"
                  @click.native.prevent="handleShow(slotProps.callback.row)"
                  type="text">
                  {{'조회'| language}}
                </el-button>
                <!-- <el-divider direction="vertical"></el-divider> -->
                <!-- <el-popconfirm
                  title="삭제하시겠습니까"
                  @onConfirm="handleDeleteUser(slotProps.callback.row.id)"
                  :confirmButtonText="'확인'|language"
                  :cancelButtonText="'취소'|language"
                >
                  <el-button
                    v-if="slotProps.callback.row.deleted_at"
                    slot="reference"
                    type="text"
                    style="padding-left:15px;color:#f56c6c">
                    삭제
                  </el-button>
                </el-popconfirm> -->
              </template>
            </my-table>
          </div>
        </div>
      </div>
    </div>

    <el-dialog
      :title="dialogForm.title"
      custom-class="dialog-content"
      :visible.sync="dialogForm.dialogVisible"
      :destroy-on-close="true"
      top="5%"
      width="800px">
      <div class="dialog-body-content" v-html="emailHtml" v-loading="htmlLoading">
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { publicEvents } from '@/mixins'
import myTable from '_c/Table'
import * as noticeApi from '@/api/notice/index'
export default {
  name: 'notice_info',
  data () {
    return {
      formInline: {
        keyword: ''
      },
      columns: [{
        label: '상태',
        prop: '',
        width: 80,
        slot: 'status'
      }, {
        label: '유형',
        prop: 'type',
        width: 120
      }, {
        label: '제목',
        prop: 'title',
        sortable: true
      }, {
        label: '아이디',
        prop: 'has_member.name',
        sortable: true
      }, {
        label: '이메일 주소',
        prop: 'email',
        sortable: true
      }, {
        label: '보내는 시간',
        prop: 'created_at',
        sortable: true
      }, {
        label: '업데이트시간',
        prop: 'updated_at',
        sortable: true
      }, {
        label: '관리',
        prop: '',
        width: 100,
        align: 'left',
        slot: 'operation'
      }],
      data: [],
      pagination: {
        currentPage: 1,
        pageSize: 15
      },
      selectionData: [],
      loading: true,
      dialogForm: {
        dialogVisible: false,
        title: '신규등록'
      },
      emailHtml: '',
      htmlLoading: false,
      sortParams: {}
    }
  },
  components: {
    myTable
  },
  mixins: [publicEvents],
  mounted () {
    this.getNoticeList()
  },
  methods: {
    getNoticeList () {
      const data = {
        ...this.formInline,
        ...this.sortParams,
        page: this.pagination.currentPage,
        per: this.pagination.pageSize
      }
      this.loading = true
      noticeApi.emailInfo(data).then(res => {
        this.loading = false
        this.data = res.data
        this.pagination.total = res.meta.pagination.total
      }).catch(() => {
        this.loading = false
      })
    },
    sortChange (val) {
      this.pagination.currentPage = 1
      if (val.order === 'ascending') {
        this.sortParams = {
          sort: 'asc',
          order_by: val.prop
        }
      } else if (val.order === 'descending') {
        this.sortParams = {
          sort: 'desc',
          order_by: val.prop
        }
      } else {
        this.sortParams = {}
      }
      this.getNoticeList()
    },
    handleShow (rowData) {
      this.dialogForm.title = '알림 내용'
      this.dialogForm.dialogVisible = true
      this.htmlLoading = true
      noticeApi.emailInfoShow({ id: rowData.id }).then(res => {
        this.emailHtml = res
      }).finally(() => {
        this.htmlLoading = false
      })
    },
    handleSearch () {
      this.pagination.currentPage = 1
      this.getNoticeList()
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
      this.getNoticeList()
    },
    emitSelection (val) {
      this.selectionData = val
    },
    currentChange (val) {
      this.pagination.currentPage = val
      this.getNoticeList()
    }
  }
}
</script>
